<template>
  <div ref="mychart" class="chartBox" />
</template>

<script>
// 1. 局部引入
import echarts from "./utils/echarts";
// 2. 引入 charts自适应(兼容侧边栏的 收缩)
import resize from "./mixins/echartResize.js";
export default {
  name: "BaseEcharts",
  mixins: [resize],
  props: {
    options: {
      type: Object,
      default: null,
    },
    initedFunction: {
      type: Function,
      default: () => {
        return (e) => {};
      },
    },
  },
  data() {
    return {
      chart: null, // echarts 实例  名称不能变，在resize.js 中有对其的引用
    };
  },
  watch: {
    // options 响应式处理
    options: {
      deep: true,
      immediate: true,
      handler(newoptions) {
        if (newoptions) {
          console.log("newoptions", newoptions);
          this.initChart(newoptions);
        }
      },
    },
  },
  methods: {
    // 初始化/更新实例
    initChart(options) {
      // 父组件传入的数据 一般通过接口获取
      if (!options) {
        return;
      }
      // 如果没有实例化echarts 则实例，  有就更新就行
      if (!this.chart) {
        console.log("echarts", echarts);
        this.chart = echarts.init(this.$refs.mychart);
      }
      this.chart.clear() // 销毁实例
      // 当前配置项 优先级大于 默认配置项
      this.chart.setOption(options);
      this.initedFunction(this.chart,echarts)
    },
  },
};
</script>

<style scoped>
.chartBox {
  width: 100%;
  height: 100%;
  /* width: 400px;
  height: 400px; */
}
</style>
